<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

  <style>
        body {
            font-family: Arial, sans-serif;
            font-size: 16px; /* 设置默认字体大小 */
            line-height: 1.6; /* 设置默认行高 */
        }
        #userListContainer {
            width: 90%; /* 增加表格宽度 */
            margin: 20px auto;
            text-align: center;
        }
        #userListTitle {
            background-color: #4CAF50;
            color: white;
            padding: 15px; /* 增加标题的内边距 */
            margin-bottom: 30px; /* 增加标题和表格之间的间距 */
            border-radius: 8px;
            font-size: 24px; /* 增加标题的字体大小 */
        }
        #userTable {
            width: 100%;
            border-collapse: collapse;
            margin: auto;
            font-size: 18px; /* 增加表格内容的字体大小 */
        }
        #userTable th, #userTable td {
            border: 2px solid #ddd; /* 增加表格边框粗细 */
            padding: 15px; /* 增加单元格内边距 */
        }
        #userTable th {
            background-color: #f2f2f2;
        }
        .editButton {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px; /* 增加按钮的内边距 */
            cursor: pointer;
            border-radius: 5px;
            font-size: 16px; /* 增加按钮的字体大小 */
            transition: background-color 0.3s ease; /* 添加过渡效果 */
        }
        .editButton:hover {
            background-color: #45a049; /* 悬停时的背景色 */
        }
        
      
       
		/* 弹框样式 */
		 #editModal{
		    display: none;
		    position: fixed;
		    z-index: 1000;
		    left: 50%;
		    top: 50%;
		    transform: translate(-50%, -50%);
		    width: 500px;
		    height: 600px;
		    background-color: #fff;
		    border: 1px solid #ccc;
		    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
		}
		.modal-content .close{
		font-size:28px;
		margin-left:460px;
		cursor: pointer; /* 设置鼠标指针为小手 */
		}
		.modal-content h2{
		text-align:center;
		margin-top:2px;
		
		}
          #editForm {
            margin-top: 20px;
            text-align: left;
        }
        #editForm input[type="text"] {
            width: 100%;
            padding: 10px;
            margin: 5px 0 15px 0;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
            font-size: 20px;
        }
        label{
        font-size:23px;
        padding-left:10px;
        }
        #editForm .editSubmit {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            border-radius: 5px;
            font-size: 20px;
            margin-top: 10px;
            text-align:center;
            display: block;
            margin:auto;
        }
        #editForm .editSubmit:hover {
            background-color: #45a049;
        }
    </style>


</head>
<div id="userListContainer">
    <h2 id="userListTitle">课程安排</h2>
    <table id="userTable">
        <thead>
            <tr>
                <th>ID</th>
                <th>课程名称</th>
                <th>教练</th>
                <th>星期</th>
                <th>开始时间</th>
                <th>结束时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- 用户数据将动态生成并插入到这里 -->
        </tbody>
    </table>
</div>

<div id="editModal">
    <div class="modal-content">
        <span class="close" onclick="closeModal()">&times;</span>
        <h2>编辑课程信息</h2>
        <form id="editForm">
            <input type="hidden" id="editCourseId" name="courseId">
            <label for="editCourseName">课程名称:</label><br>
            <input type="text" id="editCourseName" name="editCourseName"><br>
            <label for="editCoach">教练:</label><br>
            <input type="text" id="editCoach" name="editCoach"><br> <!-- 新添加的教练输入框 -->
            <label for="editDay">星期:</label><br>
            <input type="text" id="editDay" name="editDay"><br>
            <label for="editStartTime">开始时间:</label><br>
            <input type="text" id="editStartTime" name="editStartTime"><br>
            <label for="editEndTime">结束时间:</label><br>
            <input type="text" id="editEndTime" name="editEndTime"><br>
            <input type="button" value="修改" class="editSubmit" onclick="submitEdit()">
        </form>
    </div>
</div>


<script>
$(document).ready(function() {
    // 页面加载完成后立即加载用户数据
    reloadCourseData();

    // 编辑按钮点击事件绑定 
    $('#userTable').on('click', '.editButton', function() {
        var courseId = $(this).closest('tr').find('td:first').text(); 
        var courseName = $(this).closest('tr').find('td:eq(1)').text(); 
        var coach = $(this).closest('tr').find('td:eq(2)').text(); 
        var week = $(this).closest('tr').find('td:eq(3)').text(); 
        var starttime = $(this).closest('tr').find('td:eq(4)').text(); 
        var endtime = $(this).closest('tr').find('td:eq(5)').text(); 
        openModal(courseId, courseName,coach, week, starttime, endtime); // 打开编辑弹框并填充数据
    });
});

// 加载课程数据
function reloadCourseData() {
    $.ajax({
        type: 'GET',
        url: 'http://localhost:8080/zhengshidazuoye/shedule', // 根据实际情况修改URL
        dataType: 'json',
        success: function(res) {
            renderCourseTable(res); // 渲染课程表格

        },
        error: function() {
            alert('获取数据失败，请重试。');
        }
    });
}

// 渲染课程表格
function renderCourseTable(courses) {
    var courseTableBody = $('#userTable tbody');
    courseTableBody.empty(); // 清空现有内容

    $.each(courses, function(index, course) {
        var row = $('<tr></tr>');
        row.append('<td>' + course.id + '</td>');
        row.append('<td>' + course.course + '</td>');
        row.append('<td>' + course.coach + '</td>');
        row.append('<td>' + course.week + '</td>');
        row.append('<td>' + course.starttime + '</td>');
        row.append('<td>' + course.endtime + '</td>');
        row.append('<td><button class="editButton">编辑</button></td>');
        courseTableBody.append(row);
    });
}

// 打开编辑弹框，并填充课程信息
function openModal(courseId, courseName,coach, week, starttime, endtime) {
    $('#editCourseId').val(courseId);
    $('#editCourseName').val(courseName);
    $('#editCoach').val(coach);
    $('#editDay').val(week);
    $('#editStartTime').val(starttime);
    $('#editEndTime').val(endtime);
    $('#editModal').css('display', 'block');
}

// 关闭编辑弹框
function closeModal() {
    $('#editModal').css('display', 'none');
}

// 提交编辑后的数据
function submitEdit() {
    var courseId = $('#editCourseId').val();
    var courseName = $('#editCourseName').val();
    var coach = $('#editCoach').val();
    var week = $('#editDay').val();
    var starttime = $('#editStartTime').val();
    var endtime = $('#editEndTime').val();

    var data = {
        courseId: courseId,
        courseName: courseName,
        coach:coach,
        week: week,
        starttime: starttime,
        endtime: endtime
    };

    $.ajax({
        type: 'post', // 使用 PUT 方法更新数据
        url: 'http://localhost:8080/zhengshidazuoye/shedule', // 根据实际情况修改URL
        data: data,
        success: function(response) {
            alert('修改成功');
            closeModal();
            reloadCourseData(); // 更新成功后重新加载数据
        },
        error: function(xhr, status, error) {
            alert('修改失败，请重试');
            console.error('AJAX Error: ' + status + ' - ' + error);
        }
    });
}
</script>

</body>
</html>